<template>
    <div>
          <div class="ad" ref="wrap"></div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts'
import {onMounted, ref,} from 'vue'
var value=[987,632,146,367,247]
var temp = 0
let option =ref( {
  
    tooltip: {
        show: false,
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} MB',
    },
    toolbox: {
      
    },
    legend: {
        textStyle:{
            color:'white'
        },
       
        // show: false,
        data: ['30k+', '20k~30k', '15k~20k', '10k~15k', '10k及以下'],
    },
    series: [
        {
            name: '流量',
            type: 'funnel',
            left: '20%',
            width: '60%',
            label: {
                show: true,
                color: '#000000',
                formatter: function () {
                    for (var i in value) {
                        console.log(value[i]);
                        if (i == temp) {
                            temp++;
                            return value[i] + ' MB';
                        }
                    }
                },
            },
            labelLine: {
                show: true,
            },
            itemStyle: {
                opacity: 1,
            },
            emphasis: {
                label: {
                    position: 'inside',
                    // formatter: '{b}Expected: {c}%',
                },
            },
            data: [
                { value: 100, name: '30k+', itemStyle: { color: '#4672F7' } },
                { value: 90, name: '20k~30k', itemStyle: { color: '#4C9DFF' } },
                { value: 50, name: '15k~20k', itemStyle: { color: '#36DC88' } },
                { value: 40, name: '10k~15k', itemStyle: { color: '#FBC71B' } },
                { value: 20, name: '10k及以下', itemStyle: { color: '#F9A646' } },
            ],
        },
    ],
});

let wrap=ref('')

onMounted(()=>{
    let myChart = echarts.init(wrap.value);
    myChart.setOption(option.value);

    window.addEventListener('resize',function(){
    myChart.resize()

    })

})
</script>


<style>
.ad{
    width: 100%;
    height: 300px;

}
</style>